<!--事件和告警  -->
<template>
  <div class="alarmEvent" :style="styleObj">
    <el-tabs class="alarm-tab" stretch @tab-click="handleClick">
      <el-tab-pane label="当前告警">
        <ux-grid
          class="tableListValue"
          :key="random"
          :data="TableList2"
          ref="plxTable"
          stripe
          :border="false"
          :max-height="styleObj.tableHeightCopy"
          size="mini"
          :header-cell-style="{ 'text-align': 'center' }"
          style="width: 100%; font-size: 12px"
          :highlight-current-row="true"
          show-overflow
        >
          <ux-table-column
            v-for="(item, index) in columns"
            :key="index"
            :title="item.label"
            :field="item.prop"
            :align="item.align"
            :width="item.width"
            :formatter="item.formatter"
            resizeable
          >
          </ux-table-column>
          <ux-table-column field="alarm_level" title="告警级别" width="150">
            <template slot-scope="scope">
              <el-tag
                v-if="TagschangeMessage(scope.row.alarm_level)"
                :type="TagsColorMessage(scope.row.alarm_level)"
                disable-transitions
                effect="dark"
                size="mini"
                >{{ TagschangeMessage(scope.row.alarm_level) }}</el-tag
              >
            </template>
          </ux-table-column>
          <ux-table-column title="操作" width="140">
            <template slot="header" slot-scope="scope">
              <div>
                操作<el-button
                  class="alarm"
                  size="mini"
                  type="primary"
                  round
                  style="margin-left: 15px"
                  @click="resetAlarm(scope)"
                  :disabled="AlarmDisabled"
                  >一键确定</el-button
                >
              </div>
            </template>
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.alarm_voice"
                class="alarm"
                style="padding: 7px 7px"
                type="primary"
                @click="clickAlarm(scope.$rowIndex, scope.row, scope.data)"
                size="mini"
                :disabled="!scope.row.alarm_voice == true"
                >确认</el-button
              >
              <span v-else>已确认</span>
            </template>
          </ux-table-column>
        </ux-grid>
        <!-- <yg-table
          :columns="columns"
          :tableList="TableList2"
          :height="'650'"
        ></yg-table> -->
      </el-tab-pane>
      <el-tab-pane label="历史事件">
        <el-card>
          <el-form
            ref="FtuForm"
            :model="formData"
            label-width="80px"
            size="mini"
          >
            <el-row>
              <el-col :span="5">
                <el-form-item label="查询类型" prop="searchType">
                  <el-select
                    style="width: 100%"
                    v-model="formData.searchType"
                    placeholder="请选择"
                    @change="selectChange"
                  >
                    <el-option label="按返回数量查询" :value="0"></el-option>
                    <el-option label="按起始时间查询" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5" v-if="formItemNumShow">
                <el-form-item label="返回数量" prop="retCount">
                  <el-input v-model="formData.retCount"></el-input>
                </el-form-item>
              </el-col>
              <!-- </el-row>
          <el-row> -->
              <el-col :span="5" v-if="formItemDateShow">
                <el-form-item label="开始时间" prop="beginTime">
                  <el-date-picker
                    style="width: 100%"
                    v-model="formData.beginTime"
                    type="datetime"
                    placeholder="选择开始日期时间"
                    range-separator=":"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" v-if="formItemDateShow">
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker
                    style="width: 100%"
                    v-model="formData.endTime"
                    type="datetime"
                    placeholder="选择结束日期时间"
                    range-separator=":"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="事件类型" prop="alarm_type">
                  <el-select
                    style="width: 100%"
                    v-model="formData.alarm_type"
                    placeholder="请选择"
                  >
                    <el-option label="全部事件类型" :value="0"></el-option>
                    <el-option label="遥信变位事件" :value="1"></el-option>
                    <el-option label="遥测越限事件" :value="2"></el-option>
                    <el-option label="网关事件" :value="3"></el-option>
                    <el-option label="终端事件" :value="4"></el-option>
                    <el-option label="遥控事件" :value="5"></el-option>
                    <el-option label="遥调事件" :value="6"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button
                  size="mini"
                  type="primary"
                  @click="query"
                  style="margin-left: 20px"
                  >查询</el-button
                >
                <el-button size="mini" type="danger" @click="resset"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <ux-grid
          class="tableListValue"
          :data="TableList1"
          :key="random"
          ref="plxTable1"
          stripe
          :border="false"
          :max-height="styleObj.tableHeightCopy2"
          size="mini"
          :header-cell-style="{ 'text-align': 'center' }"
          style="width: 100%; font-size: 12px"
          :highlight-current-row="true"
          show-overflow
        >
          <ux-table-column
            v-for="(item, index) in columns"
            :key="index"
            :title="item.label"
            :field="item.prop"
            :align="item.align"
            :width="item.width"
            :formatter="item.formatter"
            resizeable
          >
          </ux-table-column>
          <ux-table-column field="alarm_level" title="告警级别" width="150">
            <template slot-scope="scope">
              <el-tag
                v-if="TagschangeMessage(scope.row.alarm_level)"
                :type="TagsColorMessage(scope.row.alarm_level)"
                disable-transitions
                effect="dark"
                size="mini"
                >{{ TagschangeMessage(scope.row.alarm_level) }}</el-tag
              >
            </template>
          </ux-table-column>
          <div slot="empty" style="color: black">
            <el-empty
              :image-size="100"
              description="哎呀,你是不是忘记查询啦!"
            ></el-empty>
          </div>
        </ux-grid>
        <!-- <yg-table
          :columns="columns"
          :tableList="TableList1"
          :height="'500'"
        ></yg-table> -->
        <div style="margin-top: 10px" v-show="TableList1.length > 0">
          <b>共 {{ TableList1.length }} 条</b>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import YgTable from "@/components/Table/YgTable.vue";
import { setMessageCallback, publishMsg, removeMessageCallback } from "@/mqtt";
// import { tableMixins } from "./mixin/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "widgetAlarmEvent",
  // mixins: [tableMixins],
  components: {
    YgTable,
  },
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    //这里存放数据
    return {
      columns: [
        {
          prop: "update_time",
          label: "告警时间",
          align: "left",
          width: "160",
        },
        {
          prop: "alarm_type",
          label: "告警类型",
          width: "100",
          formatter(row) {
            let rowkey = row.row;
            if (rowkey.hasOwnProperty("alarm_type")) {
              if (rowkey.alarm_type === 1) {
                return "遥信变位";
              }
              if (rowkey.alarm_type === 2) {
                return "遥测越限";
              }
              if (rowkey.alarm_type === 3) {
                return "网关事件";
              }
              if (rowkey.alarm_type === 4) {
                return "终端事件";
              }
              if (rowkey.alarm_type === 5) {
                return "遥控事件";
              }
              if (rowkey.alarm_type === 6) {
                return "遥调事件";
              }
            } else {
              return "";
            }
          },
        },
        // {
        //   prop: "name",
        //   label: "告警信息",
        // },
        // {
        //   prop: "desc",
        //   label: "数据描述",
        // },

        {
          prop: "alarm_desc",
          label: "告警描述",
        },
        {
          prop: "value",
          label: "值",
          width: "70",
        },
        {
          prop: "unit",
          label: "单位",
          width: "50",
        },
      ],
      TableList1: [],
      TableList2: [],
      formData: {
        searchType: 0,
        alarm_type: 0,
        retCount: 1,
        beginTime: "",
        endTime: "",
      },
      formItemNumShow: true,
      formItemDateShow: false,
      options: {},
      random: 1,
      AlarmDisabled: true,
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleObj() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        tableHeight: this.transStyle.height - 74 + "px",
        tableHeightCopy: this.transStyle.height - 40,
        tableHeightCopy2: this.transStyle.height - 110,
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        background: this.transStyle.background,
        opacity: this.transStyle.transparency / 100,
      };
    },
  },
  //监控data中的数据变化
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.refresh();
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    TagschangeMessage(state) {
      var stateMap = {
        0: "无",
        1: "通知",
        2: "一般",
        3: "严重",
      };
      return stateMap[state] || "";
    },
    TagsColorMessage(state) {
      var stateMap = {
        0: "info",
        1: "success",
        2: "warning",
        3: "danger",
      };
      return stateMap[state] || "";
    },
    //刷新组件
    refresh() {
      this.random = new Date().getTime() * 1000 + (this.random++ % 1000);
    },
    handleClick(tab, e) {
      if (tab.index === "0" || tab.index === "1") {
        this.refresh();
      }
    },
    query() {
      let newMsg = {
        webMsgType: 1019,
        funCode: 1,
      };

      newMsg.data = this.formData;
      publishMsg(newMsg);
      // publishMsg(newMsg);
    },
    resset() {
      this.$refs.FtuForm.resetFields();
    },
    selectChange(val) {
      //console.log(val)
      val == "0"
        ? (this.formItemNumShow = true)
        : (this.formItemNumShow = false);
      val == "1"
        ? (this.formItemDateShow = true)
        : (this.formItemDateShow = false);
      // if(val =='0'){
      //   this.formItemShow = true
      // }
      // if(val =='1'){
      //   this.formItemShow = false
      // }
    },
    clickAlarm(index, row, dataList) {
      let tableArr = [];
      tableArr.push({ id: row.id, alarm_voice: 0 });
      let newMsg = {
        webMsgType: 1019,
        funCode: 3,
      };
      newMsg.data = tableArr;
      publishMsg(newMsg);
    },
    resetAlarm(data) {
      if (this.TableList2.length > 0) {
        let arrs = this.TableList2.filter((e) => {
          return e.alarm_voice;
        });
        let arr = [];
        arrs.forEach((i) => {
          if (i.alarm_voice) {
            arr.push({ id: i.id, alarm_voice: 0 });
          }
        });
        let newMsg = {
          webMsgType: 1019,
          funCode: 3,
        };
        newMsg.data = arr;
        publishMsg(newMsg);
      }
    },
    onMessage(topic, msg) {
      ////console.log("正在监听--终端页面数据", topic, msg);
      switch (msg.webMsgType) {
        case 1019:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.TableList2 = msg.data;
              this.AlarmDisabled = true;
              this.TableList2.forEach((e) => {
                if (e.alarm_voice == true) {
                  this.AlarmDisabled = false;
                }
              });
              break;
            case 1:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.TableList1 = msg.data;
              break;
            case 3:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              break;
            default:
              break;
          }
          break;

        default:
          break;
      }
    },
    // 按钮点击
    buttonClick(index, prop) {
      ////console.log(index, prop);
      if (index == "resetButton") {
        this.$refs.FtuForm.resetForm();
      }
      if (index == "queryButton") {
        let newMsg = {
          webMsgType: 1019,
          funCode: 1,
        };

        newMsg.data = this.formData;
        //console.log(this.newMsg,this.formData)
        // publishMsg(newMsg)
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.options = this.value;
    setMessageCallback(this.onMessage);
    //console.log("终端管理页面请求消息");
    publishMsg({
      webMsgType: 1019,
      funCode: 0,
    });
    //console.log("终端页面请求消息 完成");
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
// @import "./css/index.scss";
.alarmEvent {
  @import "./css/index.scss";
  ::v-deep .alarm-tab {
    border: 0;

    .el-tabs__header {
      margin: 0;
      .el-tabs__nav {
        .el-tabs__item {
          background-color: #242f3b;
          border: 0px;
          color: #bfcbd9;
          padding: 0;
        }

        .el-tabs__item.is-active {
          background-color: #31455d;
          color: #409eff;
        }
      }
    }

    .el-tabs__content {
      // background-color: #05224d;
      height: auto !important;
      overflow-x: hidden;
      overflow-y: auto;

      .el-tab-pane {
        color: #bfcbd9;
      }

      &::-webkit-scrollbar {
        width: 5px;
        height: 14px;
      }

      &::-webkit-scrollbar-track,
      &::-webkit-scrollbar-thumb {
        border-radius: 1px;
        border: 0 solid transparent;
      }

      &::-webkit-scrollbar-track-piece {
        /*修改滚动条的背景和圆角*/
        background: #29405c;
        -webkit-border-radius: 7px;
      }

      &::-webkit-scrollbar-track {
        box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
      }

      &::-webkit-scrollbar-thumb {
        min-height: 20px;
        background-clip: content-box;
        box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
      }

      &::-webkit-scrollbar-corner {
        background: transparent;
      }

      /*修改垂直滚动条的样式*/
      &::-webkit-scrollbar-thumb:vertical {
        background-color: #00113a;
        -webkit-border-radius: 7px;
      }

      /*修改水平滚动条的样式*/
      &::-webkit-scrollbar-thumb:horizontal {
        background-color: #00113a;
        -webkit-border-radius: 7px;
      }
    }
  }
  ::v-deep .alarm {
    background-color: #1d47a9;
    border-color: #1d47a9;
  }
  ::v-deep .alarm.is-disabled {
    background-color: #1d47a97d;
    border-color: #1d47a97d;
  }
  ::v-deep .el-card {
    border: none;
    background-color: #0a74ff96;
  }
  ::v-deep .el-form-item .el-form-item__label {
    color: #fff;
  }
  ::v-deep .el-select .el-input__inner {
    background-color: transparent;
    border: 1px solid #0099ff;
    color: #fff;
  }
  ::v-deep .el-input__inner {
    background-color: transparent;
    border: 1px solid #0099ff;
    color: #fff;
  }
  ::v-deep .el-select .el-input .el-select__caret {
    color: #fff;
  }
  ::v-deep .el-select .el-select-dropdown {
    border: 1px solid red;
    background-color: transparent;
  }
  ::v-deep .el-select .el-select-dropdown__item {
    color: #fff;
  }
  ::v-deep .el-select .el-select-dropdown__item:hover {
    background-color: transparent;
  }
}
::v-deep .el-empty__description p {
  color: #12fffe;
  font-weight: 500;
  font-size: 14px;
}
</style>
